<template>
 <div class="main">
   <van-list v-model="loading" :finished="finished" finished-text="没有更多了"
  @load="onLoad">
   <!--展示正在热映的列表-->
<van-card  v-for="item in list" :key="item.filmId">
   <!--电影的描述：主演，时长，国际等。。。-->
  <template #desc>
    <div class="desc">
      <div>主演:{{item.actors | parseActors}}</div>
      <div>上映时间:{{item.runtime | timeFilter}}</div>
    </div>
  </template>
  <!--电影名称-->
  <template #title>
    <div class="title">{{item.name}}</div>
  </template>
  <!--电影的缩略图-->
  <template #thumb>
    <img :src="item.poster" alt="" width="66">
  </template>
  <!--电影的购票按钮-->
  <template #tags>
    <van-tag plain class="buyTicket" size="large" type="danger">预购</van-tag>
  </template>
</van-card>
</van-list>
 </div>
</template>
</template>

<script>
import Vue from 'vue';
import { Card, Tag,  List  } from 'vant';

Vue.use(Card);
Vue.use(Tag);
Vue.use(List);
import uri from "@/config/uri"

export default {
  data () {
    return {
      //默认页码，这个是为了给以后的请求预留下空间
      pageNum: 1,
      //电影列表
      list: [],
      //用来确定是否处于加载中，每次加载好了需要设置成false
      loading: false,
      //确定是否全部请求好了，当获取到所以数据就将这个值设置成true
      finished: false,
    }
  },
  methods: {
    //触发数据加载
    onLoad() {
       this.$http.get(uri.getComingSoon + "?pageNum=" + this.pageNum).then((ret) => {
         //获取到最大的页码
         let maxPageNum = Math.ceil(ret.data.total /10);
         //console.log(maxPageNum);
                // console.log(ret);
                //将原先的数据与现在请求的数据合并
                this.list = [...this.list,...ret.data.films];
                //本次请求已经完成
                this.loading = false;
               if(this.pageNum <= maxPageNum){
                  //让页码加1
                this.pageNum++
               }else{
                 //说明加载好了
                 this.finished = true;
               }
              });
    }
  },
  
      //因为电影描述是一个数组所以需要过滤成对象形式
      //这里用到过滤器 filters
      filters: {
        //解析主演
        parseActors(actors){
          //动画片可能没有演员
          let str = "";
          if(actors){
            actors.forEach(el => {
              str += el.name + "";
            })
          }else{
            str = "暂无主演";
          }
          //注意长度的截取
          return str.length > 11 ? str.substr(0,11) + "..." : str;
        }
      }
}
</script>

<style>
/*解决图片自带的圆角*/
.van-card__thumb img{
  border-radius: 0px;
}
/*重写图片右边的边距*/
.van-card__thumb{
  width: 70px;
}
/*电影名称*/
.title{
  font-size: 18px;
}
/*描述样式*/
.desc{
  font-size: 13px;
  color: #797d82;
  /*line-height: 22px;*/
}
/*评分颜色*/
.grade {
  color: orange;
}
/*购票按钮*/
.buyTicket{
position: relative;
float:right ;
top: -35px;
}
/*防止最后一个被挡住*/
.main {
  margin-bottom: 49px;
}
</style>